<template>
  <div style="height: 100vh; position: relative;" :id="mydarkTheme?'hello':''">
    <n-back-top :right="20" :bottom="65" />
    <n-loading-bar-provider>
      <n-message-provider >
        <n-grid layout-shift-disabled :x-gap="12" :y-gap="12"  cols="7" item-responsive :style="{ height: clientWidth > 1020 ? '100%' : '' }">
          <n-grid-item :span="clientWidth <1020 ? 7:2" :style="{ height: clientWidth > 1020 ? '' : '280px' }">
            <Massage @goPath="goPath"></Massage>
          </n-grid-item>
          <n-grid-item   :span="clientWidth < 1020 ? 7:5" style="overflow: auto;" >
            <n-back-top :right="40" v-if="clientWidth>1020"/>
            <RouterView id="chatTop" v-slot="{ Component }"    >
              <keep-alive>
                <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
              </keep-alive>
              <component :is='Component' v-if='!$route.meta.keepAlive' :key='$route.name' />
            </RouterView>
          </n-grid-item>
        </n-grid>
      </n-message-provider>
    </n-loading-bar-provider>

  </div>
</template>

<script  setup lang="ts">
import { onMounted, getCurrentInstance,ref } from "vue"
import { storeToRefs } from 'pinia'
import { VaeStore } from '../store'
import { useRouter, useRoute  } from 'vue-router'
import Massage from '../components/Massage.vue'


//解构
const store = VaeStore();
const $r = useRouter();


//接收
const instance = getCurrentInstance();
instance?.proxy?.$Bus.on('vae-goPath', (data: any) => {

  if(data?.name=='addArticle'){
    $r.push({ name: data?.name, params: { state: data?.state,id: data?.id } })
  }else{
    $r.push({ name: data?.name, params: { id: data?.id } })
  }


})
//解构
let {clientWidth,mydarkTheme } = storeToRefs(store);

// 生命周期
onMounted(() => {
  getWindowResize()
  window.addEventListener('resize', getWindowResize)
})
// 获取屏幕尺寸
const getWindowResize = function () {
  store.setclientWidth(window.innerWidth);
  store.setclientHeight(window.innerHeight);

}
//

//跳转页面
const goPath = (key: string) => {
  $r.push({ name: key })
}

</script>

<style lang="less" >
#hello{
  .n-avatar img{
    opacity: 0.8 !important;
  }
}
</style>
